<template>
  <view class="background">
    <view class="first-container">
      <view>请输入你的学/工号：</view>
      <input type="text" placeholder="学/工号" v-model="lossForm.studentId">
      <view>请输入你的姓名：</view>
      <input type="text" placeholder="姓名" v-model="lossForm.name">
      <view>请输入你的身份证号：</view>
      <input type="text" placeholder="身份证号" v-model="lossForm.identityCard">
    </view>
    <view style="display: flex;margin-top: 60rpx;">
      <button class="button" @click="loss">提交</button>
    </view>
  </view>
</template>

<script>


import {LossRecordForm} from "../../api/student/type";
import student from "../../api/student";

export default {
  data() {
    return {
      lossForm: {
        studentId: LossRecordForm.studentId,
        name: LossRecordForm.name,
        identityCard: LossRecordForm.identityCard
      },
      tableData:[{
        name: "毛健儒",
        sex: "男",
        studentId: "2100301124",
        college: "计算机与信息安全学院"
      }]

    }
  },
  onLoad() {

  },
  methods: {
    //校园卡挂失
    async loss() {
      try {
        const response = await student.lossCard(this.lossForm);
        uni.showModal({
          content: '确认上传挂失信息',
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          success: (res) => {
            if (res.confirm) {
              if (response.code === 200) {
                this.showToast('挂失信息上传成功');
                this.clearForm();
              } else {
                uni.showToast({
                  title: '请填写完整的挂失信息',
                  icon: 'none',
                  duration: 1000
                });
              }
            } else {
              console.log('用户点击了取消');
            }
          },
          fail: () => {
            uni.navigateTo({
              url: '/pages/card/loss', // 跳转的目标页面路径
            });
          }
        });
      } catch (error) {
        console.error(error);
      }
    },
    clearForm() {
    this.lossForm = {
      studentId: '',
      name: '',
      identityCard: ''
    };
  },
    showToast(message) {
      uni.showToast({
        title: message,
        icon: 'success',
        duration: 1000
      });
    }
  }
}
</script>

<style >
.background {
  height: 100vh; /* 使背景占满整个视口高度 */
  width: 100%;
  background: white;
  flex-direction: column; /* 使子元素垂直排列 */
  display: flex;
  align-items: center; /* 垂直居中 */

}

.first-container {
  width: 90%;
  height: 40%;
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
  gap: 10px; /* 设置子元素之间的间距 */
  margin-top: 10px;
}

.first-container > view {
  font-weight: bold;
  font-size: 14px;
}

.first-container > input {
  width: 90%; /* 输入框宽度占满容器 */
  height: 40px; /* 输入框高度 */
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 0 10px; /* 内边距 */
  font-size: 14px;
}

.button {
  border: 0;
  background-color: #409EFF;
  color: white;
  width: 180rpx;
  font-size: 14px;
  margin-top: -30px;
}
</style>